<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <home></home>
      
    </div>
    <script src="./vue.js"></script>
    <script>
        let bus = new Vue();
        // properties 缩写 
        let CommonHead = {
          
            template:`
                <div>
                    <h1>子组件</h1>
                    <button @click="biubiubiu">发射</button>
                </div>
            `,
            data(){
                return {
                    msg:"我是子组件的数据"
                }
            },
            methods:{
                biubiubiu(){
                    bus.$emit("a",this.msg);
                }
            }
        }
        let Child2 = {
          
          template:`
              <div>
                  <h1>我是另一个子组件</h1>
                 {{msg}}
              </div>
          `,
          data(){
              return {
                  msg:"我是另一个子组件的数据"
              }
          },
          mounted(){
             /*  bus.$on("a",function(msg){
                  this.msg = msg;
              }.bind(this)) */
            /*   bus.$on("a",(msg)=>{
                this.msg = msg;
              }) */
              let _this = this;

              bus.$on("a",function(msg){
                  _this.msg = msg;
              })
          }
         
      }
        let Home = {
            template:`
                <div>
                  父组件
                   <common-head></common-head>
                   <child2/>
                   {{ msg }}
                </div>
            `,
            data(){
                return {
                    msg:""
                }
            },
            methods:{
            },
            components:{
                CommonHead,
                Child2
            }
        }

     
        Vue.component("Home",Home);
        
        let vm = new Vue({
            el:"#app"
        })

    </script>
</body>
</html>